<template>
	<div>
		<Header>
			<h1>文章分类</h1>
			<p>画船听雨：你看得到我打在屏幕上的字，看不到我落在键盘上的泪。 Kali Linux：The quieter you become, the more you are able to hear.</p>
			<button id="getData" v-on:click="getCategory" style="width:200px;height:60px;">获取内容</button>
		</Header>
		<Content>
			<div class="card_content">
				<div class="categories_title">
					<h1>文章分类</h1>
				</div>
				<div class="categories_list">
					<ul>
						<li v-for="val in category" v-bind:key="val.cgid">
							<div style="display: flex;">
								<a href="#" style="width: 80%;">📎 {{val.categoryname}}</a>
								<a href="#" style="width: 20%;">🍻 {{val.articlenum}}</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</Content>
	</div>
</template>

<script>
import Header from '../components/Header.vue'
import Content from '../components/Content.vue'

export default {
	name: 'Article',
	components: {
		Header,
		Content,
	},
	data: function() {
		return {
			category: []
		}
	},
	methods: {
		getCategory: function() {
			fetch(this.url+"/article/category",{
					method: "POST",
					headers: {"Content-Type": "application/x-www-form-urlencoded"}
			})
			.then((res) => {return res.text()})
			.then((res) => {
				res = JSON.parse(res)["data"]
				for (let i in res) {
					res[i].rtlist = res[i].rtlist.split(",")
					res[i].titlelist = res[i].titlelist.split(",")
				}
				this.category = res
			})
		}
	},
	mounted() {
		var getButton = document.getElementById("getData")
		getButton.addEventListener("click",()=>{this.toast("好的~",2000)})
	}
}
</script>

<style scoped>
	.card_content {
		width: 90%;
		margin: 0 auto;
		padding: 24px;
		border: 1px solid #AAAAAA;
		border-radius: 5px 5px 5px 5px;
	}
	.categories_title {
		margin-bottom: 10px;
		color: #111111;
		font-size: 1.75rem;
		font-weight: 400;
		text-align: center;
	}
	.categories_list {
		width: 80%;
		margin: 0 auto;
		padding: 24px;
	}
	ul {
		list-style-type: none;
	}
	li {
		padding: 1rem;
		font-size: 1.25rem;
		font-weight: 700;
		align-items: center;
	}
</style>